<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:b="http://bootsfaces.net/ui">

    <ui:composition>
        <b:navBar brand="R.A.M. Labs" brandHref="index.jsf" inverse="true" fixed="top">
            <b:navbarLinks>
                <b:navLink class="active" value="Home" href="index.jsf"></b:navLink>
                <b:navLink value="Products" href="products.jsf"></b:navLink>
                <b:navLink value="Contact" href="contact.jsf"></b:navLink>
                <b:navLink value="About" href="about.jsf"></b:navLink>
                <b:navLink value="Register" href="register.jsf"></b:navLink>
                <b:dropMenu value="My Account" styleClass="dropmenu-form dropmenu-right">
                    <h:form id="loginForm" style="width:100%; align-content: center;" >
                        <b:navLink header="Login"></b:navLink>
                        <b:navLink></b:navLink>
                        <h:outputText value="Username:" for="username" />
                        <b:inputText placeholder="Username" id="username" value="#{userBean.username}"
                                     ajax="true" autocomplete="false" update="@(.message)" >
                            <f:facet name="prepend">
                                <b:icon name="user" />
                            </f:facet>
                        </b:inputText>
                        <b:message for="username" />
                        <h:outputText value="Password:" />
                        <b:inputSecret placeholder="Password" id="password" value="#{userBean.password}"
                                       ajax="true" autocomplete="false" update="@(.message)">
                            <f:facet name="prepend">
                                <b:iconAwesome name="key" />
                            </f:facet>
                        </b:inputSecret>
                        <b:commandButton value="Login" onclick="ajax:loginBean.login()" update="@form" look="primary"
                                         style="width:100%" action="#{userBean.login()}" />
                        <b:commandButton value="Forgotten password?" onclick="ajax:loginBean.forgotPassword()" update="@form"
                                         look="danger" style="width:100%" />
                    </h:form>
                </b:dropMenu>
            </b:navbarLinks>
        </b:navBar>
    </ui:composition>

</html>
